<template>
  <div class='code-wrap'>
    <div class='code-content'>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部类目" name="1"></el-tab-pane>
      </el-tabs>
      <div class='code-search'>
        <el-form :inline="true" :model="formInline">
          <el-form-item label="能力分类名称">
            <el-input v-model="formInline.code" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  icon="Search" @click="handleSearch">搜索</el-button>
            <el-button  icon="Refresh" @click="handleReset">重置</el-button>
            <el-button type="primary"  icon="Plus" @click="handleAdd">新增类目</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class='table-wrap'>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="index" label="序号" align='center' />
          <el-table-column prop="code" label="能力分类编码" align='center' />
          <el-table-column prop="name" label="能力分类名称" align='center' />
          <el-table-column prop="time" label="添加时间" align='center' />
          <el-table-column label="操作" align='center' >
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleEdit('edit', scope.row)">编辑</el-button>
              <el-button link type="danger" size="small" @click='handleDelete(scope.$index)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class='pagination-wrap'>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <Detail v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
  </div>
</template>
<script lang='ts' setup>
import type { TabsPaneContext } from 'element-plus'
import to from 'await-to-js'
import Detail from './detail.vue';

const activeName = ref('1')
let tableData = ref([
  {
    name: '网络',
    code: '01',
    time: '2020-09-01 13:44:21',
    index: '01'
  },{
    name: '网络',
    code: '01',
    time: '2020-09-01 13:44:21',
    index: '02'
  },{
    name: '网络',
    code: '01',
    time: '2020-09-01 13:44:21',
    index: '03'
  },{
    name: '网络',
    code: '01',
    time: '2020-09-01 13:44:21',
    index: '04'
  },{
    name: '网络',
    code: '01',
    time: '2020-09-01 13:44:21',
    index: '05'
  },
])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)
let formInline = ref({
  name: '',
})
const isDialog = ref(false)
const currentRow = ref({})
const type = ref('edit')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const handleAdd = () => {
  currentRow.value = {}
  isDialog.value = true
}

const handleSearch = () => {}

const handleReset = () => {
  formInline.value = {
    name: ''
  }
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const handleEdit = (currentType: string, row?: any) => {
  currentRow.value = row
  isDialog.value = true
}

const handleDelete = async (index: any) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该类目?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  tableData.value.splice(index, 1)
  ElMessage.success('操作成功')
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  // search && searchTable()
}

const fetchList = () => {}
</script>
<style lang='scss' scoped>
.code-wrap{
  padding: 20px;
  .code-content{
    background-color: #ffffff;
    padding: 10px;
    .code-search{

    }
    .table-wrap{}
    .pagination-wrap{
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>